﻿@inherits LayoutComponentBase

@inject NavigationManager _navMan

<style>
    /* the size of the containers will fill up their parents up to the viewport */
    html, body, app, .k-drawer-container, .k-drawer-content, .main {
        width: 100%;
        height: 100%;
        max-height: 100%;
    }

    /* vertical scroll should happen in the main portion of the content - where the Body is
    This keeps the header sticky at the top
    */
    .main {
        overflow-y: auto;
    }

    /* horizontal scroll happens in the drawer content to keep the drawer on the left side of the screen */
    .k-drawer-content {
        overflow-x: auto;
    }

    /* sizing of the header */
    .top-row {
        left: 0;
    }

    /* expand-collapse button for the drawer - position above the header */
    .drawer-hamburger {
        position: absolute;
        z-index: 2;
    }

    /* There are some CSS rules from the default site.css related to the sidenav that are commented out
    Some of the other rules there define parts of the layout too (like the header rules, or the .main rules
    In your app, use the height and overflow settings above as guidelines and implement the rest of the layout according to your case
    */
</style>

<TelerikRootComponent>

    <TelerikDrawer Data="@NavigablePages" @bind-Expanded="@DrawerExpanded" MiniMode="true" Mode="@DrawerMode.Push" @ref="@DrawerRef" @bind-SelectedItem="@SelectedItem">
        <Content>
            @* This layout is now in the drawer Content, and is very similar to the default template layout *@
            <div class="main">
                @* This is the button to collapse/expand the drawer, in this sample it is positioned absolutely so it moves with the drawer and stays above the rest of the content *@
                <TelerikButton OnClick="@( () => DrawerRef.ToggleAsync() )" Icon="menu" Class="drawer-hamburger"></TelerikButton>
                
                <div class="top-row px-4">
                    <a href="https://docs.microsoft.com/en-us/aspnet/" target="_blank">About</a>
                </div>

                <div class="content px-4">
                    @Body
                </div>
            </div>
        </Content>
    </TelerikDrawer>

</TelerikRootComponent>

@code{
    bool DrawerExpanded { get; set; } = true;
    DrawerItem SelectedItem { get; set; }
    TelerikDrawer<DrawerItem> DrawerRef { get; set; }

    // in this sample we hardcode the existing pages, in your case you can
    // create the list based on your business logic (e.g., based on user roles/access)
    List<DrawerItem> NavigablePages { get; set; } = new List<DrawerItem>
    {
        new DrawerItem { Text = "Home", Url = "/", Icon = "home" },
        new DrawerItem { IsSeparator = true, Url=string.Empty },//define a URL to separators to make the pre-selection logic easier
        new DrawerItem { Text = "Counter", Url = "counter", Icon = "plus-outline" },
        new DrawerItem { Text = "FetchData", Url = "fetchdata", Icon = "grid" }
    };

    protected override void OnInitialized()
    {
        // pre-select the page the user lands on
        // as the user clicks items, the DOM changes only in the Body and so the selected item stays active
        string currPage = _navMan.Uri;
        DrawerItem ActivePage = NavigablePages.Where(p => p.Url.ToLowerInvariant() == GetCurrentPage().ToLowerInvariant()).FirstOrDefault();
        if(ActivePage != null)
        {
            SelectedItem = ActivePage;
        }

        base.OnInitialized();
    }

    public string GetCurrentPage()
    {
        string uriWithoutQueryString = _navMan.Uri.Split("?")[0];
        string currPage = uriWithoutQueryString.Substring(Math.Min(_navMan.Uri.Length, _navMan.BaseUri.Length));
        return string.IsNullOrWhiteSpace(currPage) ? "/" : currPage;
    }

    // generally, this should go into its own file, but it is here to keep all the drawer-related code in one place
    public class DrawerItem
    {
        public string Text { get; set; }
        public string Url { get; set; }
        public string Icon { get; set; }
        public bool IsSeparator { get; set; }
    }
}